import React, { Fragment } from 'react'
import { StyleSheet, ScrollView, View, Text } from 'react-native'
import { ScaleS, ScaleT, ONE_PIXEL } from 'src/utils/ScreenUtil'
import BasePage from 'src/pageP/base/base-page/index'
import CustomButton from 'src/components/button/CustomButton'
import SetCell from './components/SetCell'
import PromptModal from 'src/components/modal/PromptModal'
import { AgreementCustom } from 'src/config/index'
import { connect } from 'react-redux'
import {
  INIT_USERINFO_ACTION,
  UPDATE_USERINFO_ACTION
} from '@store/actions/userinfo'
import { INIT_MAIN_PAGE_B_ACTION } from 'src/pageB/main/main-page/store/action'
import { INIT_MAIN_PAGE_C_ACTION } from 'src/pageC/mine/mine-page/store/action'
import { SwitchRole } from 'src/components/modal/SwitchRoleModal'

// 发送行为
const mapDispatchToProps = dispatch => ({
  updateUserInfo (payload) {
    dispatch(UPDATE_USERINFO_ACTION(payload))
  },
  initUserInfoState () {
    dispatch({
      type: INIT_USERINFO_ACTION
    })
  },
  initBMainCenterState () {
    dispatch({
      type: INIT_MAIN_PAGE_B_ACTION
    })
  },
  initCMainCenterState () {
    dispatch({
      type: INIT_MAIN_PAGE_C_ACTION
    })
  }
})

@connect(
  ({ userinfo }) => ({
    userId: userinfo.userId
  }),
  mapDispatchToProps
)
class CSetPage extends BasePage {
  // setList = ['提醒设置', '我的评价', '帮助反馈', '使用协议']
  setList = ['使用协议']

  constructor (props) {
    super(props)
    this.state = {
      header: {},
      deleteVisible: false
    }
  }

  childRender () {
    const { deleteVisible } = this.state
    const { userId } = this.props
    return (
      <ScrollView style={styles.container}>
        {this.setList.map((e, i) => (
          <CustomButton key={e} params={i} onPress={this.setCellClick}>
            <SetCell title={e} />
          </CustomButton>
        ))}
        <CustomButton onPress={this.switchCellClick}>
          <SetCell style={styles.switchCell} title="切换身份" value="招聘者" />
        </CustomButton>
        {
          [1, 2, 3].map((item) => {
            return <View key={item} style={styles.placeholder} ></View>
          })
        }
        {userId && (
          <CustomButton
            style={styles.logoutBtn}
            params={4}
            onPress={this.setCellClick}
          >
            <Text style={styles.grayTitle}>退出登录</Text>
          </CustomButton>
        )}
        <PromptModal
          visible={deleteVisible}
          onCancel={this.onLogoutCancel}
          onConfirm={this.onLogoutConfirm}
          onModalHide={this.onLogoutModalHide}
          config={{
            titleText: '温馨提示',
            contentText: '确定退出登录吗？'
          }}
        />
      </ScrollView>
    )
  }

  setCellClick = index => {
    console.log(index)
    switch (index) {
      case 0:
        this.props.navigation.navigate('CommonWebView', {
          source: { uri: AgreementCustom }
        })
        break
      case 4:
        this.toggleModal('deleteVisible', true)
        break
      default:
        break
    }
  }

  switchCellClick = () => {
    console.log('switchCellClick')
    SwitchRole()
  }

  onLogoutCancel = () => {
    this.toggleModal('deleteVisible', false)
  }

  onLogoutConfirm = () => {
    this.toggleModal('deleteVisible', false)
  }

  onLogoutModalHide = onConfirmed => {
    if (onConfirmed) {
      this.props.initUserInfoState()
      this.props.initCMainCenterState()
      this.props.initBMainCenterState()
      setImmediate(() => {
        this.goBack()
      })
    }
  }

  toggleModal = (visibleName, visibleValue) => {
    this.setState({
      [visibleName]: visibleValue
    })
  }
}

export default CSetPage

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    paddingTop: ScaleS(22)
  },
  switchCell: {
    paddingLeft: ScaleS(20),
    marginTop: ScaleS(28)
  },
  logoutBtn: {
    marginTop: ScaleS(59),
    alignSelf: 'center',
    width: ScaleS(312),
    height: ScaleS(50),
    borderRadius: ScaleS(5),
    backgroundColor: '#EBEBEB',
    justifyContent: 'center',
    alignItems: 'center'
  },
  grayTitle: {
    fontSize: ScaleT(16),
    fontWeight: '400',
    color: '#999999'
  },
  placeholder: {
    width: '100%',
    height: ScaleS(78)
  }
})
